<template>
	<div v-if="target">
	<div style="display: flex;align-items: center;margin-bottom: 20px;">
		<span style="margin-right: 10px;cursor: pointer;display: flex;align-items: center;" @click="back">
			<el-icon><ArrowLeft /></el-icon>
			<span>返回</span>
			<span style="margin-left: 10px;">|</span>
		</span>
		<h3>领取记录</h3>
	</div>
	<el-row>
		<el-col :span="6">
		      <el-statistic :value="props.getnum" title="已领取"/>
		</el-col>
		<el-col :span="6">
		      <el-statistic :value="props.getnum" title="已使用"/>
		</el-col>
		<el-col :span="6">
		      <el-statistic :value="0" title="已过期"/>
		</el-col>
	</el-row>
	<div class="fomeflex">
		<el-form-item label="会员信息">
			<el-input v-model="username" style="width: 240px;height: 36px;" size="large" placeholder="请输入会员昵称/手机号"/>
		</el-form-item>
		<el-button type="primary" @click="searchgetCoupon">搜索</el-button>
		<el-button plain @click="reset">重置</el-button>
	</div>
	<el-table :data="tableData" style="width: 100%" height="48vh">
		<el-table-column prop="couponName" label="优惠券名称"></el-table-column>
		<el-table-column prop="userName" label="领取会员"></el-table-column>
		<el-table-column prop="userReceive" label="领取方式"></el-table-column>
		<el-table-column prop="receiveTime" label="领取时间"></el-table-column>
		<el-table-column prop="expireTime" label="到期时间"></el-table-column>
		<el-table-column prop="status" label="当前状态"></el-table-column>
		<el-table-column prop="usedTime" label="使用时间"></el-table-column>
		<!-- <el-table-column prop="address" label="使用有效期"></el-table-column> -->
		<el-table-column label="操作">
			<template #default='scope'>
				<el-button type="primary" @click="orderDetail(scope.row.couponUserId)">查看订单</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination
		layout="prev,pager,next"
		:page-size="pageSize"
		:page-count="pageCount"
		v-model:current-page="pageIndex"
		@current-change="changePage"
	></el-pagination>
	</div>
	<CouponOrderDetail v-if="target==false" @change-children="changeFn" :msgid="couponUserid"></CouponOrderDetail>
</template>

<script setup>
	import {ref,reactive,onMounted,defineProps,shallowRef,defineEmits } from "vue"
	import {ElMessage,ElForm,ElFormItem,ElSelect,ElOption,ElInput,ElRadio,ElRadioGroup,ElButton,ElTreeSelect,ElUpload,ElIcon} from "element-plus";
	import {CouponUserList,CouponUserSearch} from "@/api"
	import {useRoute,useRouter} from "vue-router";
	import {Plus,ArrowLeft} from '@element-plus/icons-vue'
	import {uploadUrl,baseUrl} from "@/utils/request";
	import CouponOrderDetail from "./CouponOrderDetail.vue"
	
	let target=ref(true)
	let pageCount=shallowRef(0)
	const pageSize=5;
	const pageIndex=shallowRef(1);//当前的页数
	const emit = defineEmits(['update-message']);
	const back=()=>{
		emit('update-message');
	}
	// 接收父组件传来的id
	const props = defineProps(['dataid','getnum'])
	
	// 子组件返回父组件
	const changeFn=()=>{
		target.value=true
	}

	let route = useRoute();
	let router = useRouter()
	const tableData=ref([])
	// 列表
	const getCouponList=async()=>{
		// console.log(props.getnum)
		let res = await CouponUserList({
			pageSize:pageSize,
			pageIndex:pageIndex.value,
			couponId:props.dataid
		})
		// console.log("领取记录列表",res)
		tableData.value=res.list
		pageCount.value=res.pageCount
	}
	
	let username=ref("")
	// 搜索
	const searchgetCoupon=async()=>{
		//调用搜索接口；
		let res=await CouponUserSearch({
			pageSize:pageSize,
			pageIndex:pageIndex.value,
			userName:username.value,
		})
		// console.log(res)
		username.value=""
		tableData.value=res.list
		pageCount.value=res.pageCount
	}
	
	// 重置
	const reset=()=>{
		username.value=""
		searchgetCoupon()
	}
	
	//点击分页
	const changePage=(page)=>{
		// console.log(page)
		pageIndex.value=page;
		searchgetCoupon()
	}
	
	var couponUserid;
	// 查看订单
	const orderDetail=(item)=>{
		couponUserid=item
		target.value=false
	}


	getCouponList()
</script>

<style scoped>
	
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	.el-col {
	  text-align: center;
	  }
	 .el-row{
		 margin-bottom: 25px;
	 }
	/* .demo-pagination-block + .demo-pagination-block {
	  margin-top: 20px;
	} */
	.demo-pagination-block{
		margin-top: 20px;
		float: right;
	}
	.demo-pagination-block .demonstration {
	  margin-bottom: 16px;
	}
</style>

<style>
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	
	.el-button{
		margin-left: 15px;
	}
	.el-input__wrapper{
		margin-right:15px;
	}
	/* h3{
		margin-left: 30px;
		margin-bottom: 20px;
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
		margin-right: 100px;
	} */
	.el-table{
		width: 100vh;
	}
	.fomeflex{
		/* margin-left: 30px; */
		margin-top: 20px;
		display: flex;
	}
	.cell .el-button{
		margin-left: 3px !important;
		padding: 5px 10px;
		margin-top: 3px;
	}
	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}
	
</style>
